<template>
  <el-row
    class="widget-col widget-view"
    :class="{
      active: selectWidget.key && selectWidget.key == element.key
    }"
    @click.native.stop="handleSelectWidget(index)"
    type="flex"
    :gutter="element.options.gutter || 0"
    :justify="element.options.justify"
    :align="element.options.align"
  >
    <el-col
      v-for="(item, index) in element.columns"
      :key="index"
      :span="item.span || 0"
    >
      <draggable
        v-model="item.list"
        v-bind="{
          group: 'people',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.drag-widget'
        }"
        :no-transition-on-drag="true"
        @add="handleWidgetColAdd($event, element, index)"
      >
        <transition-group name="fade" tag="div" class="widget-col-list">
          <template v-for="(col, colindex) in item.list" v-if="col && col.key">
            <widget-col-item
              v-if="col.type === 'grid'"
              :key="col.key"
              :element="col"
              :select.sync="selectWidget"
              :index="colindex"
              :data="item"
              @select-change="handleSelectChange($event, item)"
            >
            </widget-col-item>
            <widget-col-item
              v-if="col.type == 'subTable'"
              :key="col.key"
              :element="col"
              :select.sync="selectWidget"
              :index="colindex"
              :data="item"
              @select-change="handleSelectChange($event, item)"
            >
            </widget-col-item>
            <widget-table
              v-else-if="col.type == 'table'"
              :key="col.key"
              :element="col"
              :select.sync="selectWidget"
              :index="colindex"
              :data="item"
              @select-change="handleSelectChange($event, item)"
            >
            </widget-table>

            <widget-form-item
              v-else
              :key="col.key"
              :element="col"
              :select.sync="selectWidget"
              :parentContainer="element"
              :index="colindex"
              :data="item"
              @select-change="handleSelectChange($event, item)"
            >
            </widget-form-item>
          </template>
        </transition-group>
      </draggable>
    </el-col>

    <div
      class="widget-view-action widget-col-action"
      v-if="selectWidget.key == element.key"
    >
      <i
        class="iconfont icon-trash"
        @click.stop="handleWidgetDelete(index)"
      ></i>
    </div>

    <div
      class="widget-view-drag widget-col-drag"
      v-if="selectWidget.key == element.key"
    >
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </el-row>
</template>

<script>
import WidgetFormItem from "./WidgetFormItem";
import WidgetTable from "./WidgetTable";
import Draggable from "vuedraggable";
import { genID } from "./router/utils.js";

export default {
  name: "widget-col-item",
  components: {
    Draggable,
    WidgetFormItem,
    WidgetTable
  },
  props: ["element", "select", "index", "data", "parentContainer"],
  data() {
    return {
      selectWidget: this.select
    };
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index];
    },
    handleWidgetDelete(index) {
      if (this.data.list.length == 1) {
        this.$emit("select-change", -1);
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit("select-change", index - 1);
        } else {
          this.$emit("select-change", index);
        }
      }

      this.data.list.splice(index, 1);
    },

    handleWidgetColAdd($event, row, colIndex) {
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      var list = row.columns[colIndex].list;
      const key = new Date().getTime() + "";
      this.$set(row.columns[colIndex].list, newIndex, {
        ...row.columns[colIndex].list[newIndex],
        options: {
          ...row.columns[colIndex].list[newIndex].options,
          remoteFunc:
            row.columns[colIndex].list[newIndex].options.remoteFunc ||
            "func_" + key
        },
        novalid: {
          ...row.columns[colIndex].list[newIndex].novalid
        },
        key,
        model: row.columns[colIndex].list[newIndex].model
          ? row.columns[colIndex].list[newIndex].model
          : row.columns[colIndex].list[newIndex].type + "_" + key,
        rules: row.columns[colIndex].list[newIndex].rules
          ? [...row.columns[colIndex].list[newIndex].rules]
          : []
      });

      if (
        Object.keys(row.columns[colIndex].list[newIndex]).includes("columns")
      ) {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          columns: [
            ...row.columns[colIndex].list[newIndex].columns.map(item => ({
              ...item,
              list: [...item.list]
            }))
          ]
        });
      }

      if (
        Object.keys(row.columns[colIndex].list[newIndex].options).includes(
          "options"
        )
      ) {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            options: [
              ...row.columns[colIndex].list[newIndex].options.options.map(
                item => ({
                  ...item
                })
              )
            ]
          }
        });
      }
      this.$forceUpdate();

      this.selectWidget = row.columns[colIndex].list[newIndex];
    },
    handleSelectChange(index, item) {
      setTimeout(() => {
        index >= 0
          ? (this.selectWidget = item.list[index])
          : (this.selectWidget = {});
      });
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      deep: true,
      handler(val) {
        this.$emit("update:select", val);
      }
    }
  }
};
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
